<div class="pictur-browse-wrap">
<button type="button" class="absl-btn-close" id="absl-btn-close" title="关闭"><span>&times;</span></button>
<button type="button" class="iconfont icon-leftcircle absl-btn-prev" title="上一张"></button>
<button type="button" class="iconfont icon-rightcircle absl-btn-next" title="下一张"></button>
<div class="pic-bro-diglog">
<div class="pic-bro-view">
    <p class="title">
        <span class="spa_gray "></span>
        <button id="src-picture" type="button" class="iconfont icon-fangda" title="查看原图"></button>
    </p>
    <div class="picture">
        <ul class="itemwrap">
        </ul>
    </div>
</div>
<div class="pic-bro-ctrl">
    <div class="ctrl-tag-title">
        <p class="title">
            <span class="title-text">大雪山风景</span>
					<span class="pic-count">
						<span class="this-count">1</span>/<span class="total">0</span>
					</span>
        </p>
        <div class="tags-div">
            <button type="button" class="selected">美女</button>
        </div>
        <p class="text-foot spa_gray">
            <span class=" from">来源：<span class="from-value">微知</span></span>
            <span class="category">分类：<a href="javasript;" target="_blank" class="cate-value" title="美女">美女</a></span>
        </p>
    </div>
    <div class="ctrl-tag-recom">
        <div class="tag-inner">
            <div class="tag-column-choose">
                <button type="button" class="selected">推荐美图</button>
                <button type="button" class="classify">风景</button>
            </div>
            <div class="pictur-columns">
                <div class="column column1">
                    <!-- <ul>
                        <li>
                            <div class="collect-like">
                                <button type="button" collect-event="picture"><span class="iconfont icon-Collect"></span>收藏</button>
                                <button type="button" like-event="picture"><span class="iconfont icon-dianzan"></span><span class="like-count">100000+</span></button>
                            </div>
                            <img src='__FORJS__/images/pubuTest/img7.png'/>
                        </li>
                    </ul> -->
                </div>
                <div class="column column2">
                    <!-- <ul>
                        <li class="current">
                            <div class="collect-like">
                                <button type="button" collect-event="picture"><span class="iconfont icon-Collect"></span>收藏</button>
                                <button type="button" like-event="picture"><span class="iconfont icon-dianzan"></span><span class="like-count">100000+</span></button>
                            </div>
                            <img src='__FORJS__/images/img02.png'/>
                        </li>
                        <li>
                            <div class="collect-like">
                                <button type="button" collect-event="picture"><span class="iconfont icon-Collect"></span>收藏</button>
                                <button type="button" like-event="picture"><span class="iconfont icon-dianzan"></span><span class="like-count">100000+</span></button>
                            </div>
                            <img src='__FORJS__/images/WP_20160218_09_09_49_Pro.jpg'/>
                        </li>
                       
                    </ul> -->
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<div class="float-srcpreivew"></div>
<button type="button" class="absl-btn-close" id="absl-btn-close2" title="关闭"><span>&times;</span></button>
</div>
<script type="text/javascript">
    $('head').append("<link rel='stylesheet' href='__FORJS__/css/common/browse-picture.css'/>");
    $(function(){
        $('.pictur-browse-wrap').height($(window).height());
        $('#absl-btn-close').click(function(){
            $(this).parent().transition({ opacity: 0 }, function(){
                $(this).hide();
                $('body').removeClass('modal-open');
            });
        });
        var imgHeight = $('.itemwrap>.current>img').height();
        $('.itemwrap').transition({height: imgHeight});

        $('.pictur-browse-wrap').show();
        $('.pictur-columns>.column2').show();

        $('.pictur-columns>.column>ul').masonry({
            // options
            itemSelector : 'li',
            isAnimated : true,
            gutter: 5
        });
        $('.pictur-columns>.column2').hide();
        $('.pictur-browse-wrap').hide();
        $('.pictur-columns>.column').height(500);
        $('.pictur-columns>.column1').scrollMax(function(){
            var html = "<li><img src='__FORJS__/images/pubuTest/img4.png' /></li>";
            var $items = $(html);
            $(this).find('ul').append( $items ).masonry( 'appended', $items );
        });
        $('.pictur-columns>.column2').scrollMax(function(){
            var html = "<li><img src='__FORJS__/images/pubuTest/img4.png' /></li>";
            var $items = $(html);
            $(this).find('ul').append( $items ).masonry( 'appended', $items );
        });
    });
    $(window).resize(function(){
        $('.pictur-browse-wrap').height($(window).height());
        $('.float-srcpreivew').height($(window).height());
    });
    var pictureLen = $('.picture>ul>li').length;
    // 上一张
    $('.absl-btn-prev').click(function(){
        var $thisPic = $('.picture .current');
        if ($thisPic.index() == 0) {
            return;
        }
        $thisPic.addClass('navOutPrev');
        $thisPic.prev().addClass('navInPrev');
        setTimeout(function(){
            $thisPic.removeAttr('class');
            $thisPic.prev().prop('class', 'current');
            $('.itemwrap').transition({height: $thisPic.prev().height()});
        }, 0.3e3);

        var image_title = $thisPic.prev().attr('image-title');
        var image_classify = $thisPic.prev().attr('image-classify');
        var image_time = $thisPic.prev().attr('image-time');
        var image_label = $thisPic.prev().attr('image-label');
        var image_num = $thisPic.prev().attr('image-num');
        image_label=image_label.split(',');
        var html = '';
        for(var i = 0;i<image_label.length;i++){
            html+='<button type="button">'+image_label[i]+'</button>';
        }
        $('.title-text').text(image_title);
        $('.this-count').text(parseInt(image_num)+1);
        $('.pic-bro-view>.title>.spa_gray').text(image_time);
        $('.cate-value').text(image_classify);
        $('.classify').text(image_classify);
       // $('.tags-div').html(html);
    });
    // 下一张
    $('.absl-btn-next').click(function(){
        var $thisPic = $('.picture .current');
        if ($thisPic.index() == $('.picture>ul>li').length - 1) {
            return;
        }
        $thisPic.addClass('navOutNext');
        $thisPic.next().addClass('navInNext');
        setTimeout(function(){
            $thisPic.removeAttr('class');
            $thisPic.next().prop('class', 'current')
            $('.itemwrap').transition({height: $thisPic.next().height()});
        }, 0.3e3);

        var image_title = $thisPic.next().attr('image-title');
        var image_classify = $thisPic.next().attr('image-classify');
        var image_time = $thisPic.next().attr('image-time');
        var image_label = $thisPic.next().attr('image-label');
        var image_num = $thisPic.next().attr('image-num');
        image_label=image_label.split(',');
        var html = '';
        for(var i = 0;i<image_label.length;i++){
            html+='<button type="button">'+image_label[i]+'</button>';
        }
        $('.title-text').text(image_title);
        $('.this-count').text(parseInt(image_num)+1);
        $('.pic-bro-view>.title>.spa_gray').text(image_time);
        $('.cate-value').text(image_classify);
        $('.classify').text(image_classify);
       // $('.tags-div').html(html);
    });
    $('.pictur-browse-wrap').on('click', '.float-srcpreivew-img', function(){
        $("#absl-btn-close2").trigger('click');
    });
    $('.itemwrap').on('click', 'img', function(){
        $("#src-picture").trigger('click');
    });
    // 查看原图
    $('#src-picture').click(function(){
        $('.pictur-browse-wrap').css('overflow', 'hidden');
        $("#absl-btn-close2").fadeIn();
        var winHeight = $(window).height();
        var $img = $('.itemwrap>.current>img');
        var picHtml = $img.attr('src');
        var top =  $img.offset().top - $(document).scrollTop() + $('.pictur-browse-wrap').scrollTop();
        var left = $img.offset().left;
        $('.pictur-browse-wrap').append('<img title="点击关闭" class="float-srcpreivew-img" src="'+ picHtml +
                '" style="display:none;min-width:'+ $img.width() +'px;top: '+ top +'px;left:'+ left +'px"/>');
        var srcWidth = $('.float-srcpreivew-img').width();
        var srcHeight = $('.float-srcpreivew-img').height();
        $('.float-srcpreivew-img').width($img.width());
        $('.float-srcpreivew-img').show();
        var imgTop = winHeight/2 - srcHeight/2 + $('.pictur-browse-wrap').scrollTop();
        $('.float-srcpreivew-img').transition({
            left: '50%',
            top: imgTop,
            marginLeft: -srcWidth/2,
            width: srcWidth
        }, 0.5e3, function(){
            if (imgTop < 0) {
                $(this).transition({top:0});
            }
            if (srcHeight > winHeight) {
              /*  $(this).wrap('<div class="float-srcpreivew-outer" style="height:'+ $(window).height() +'px; top: 0"></div>');*/
                $(this).css( {marginLeft: 0, left:0} );
            }
        });
        $('.float-srcpreivew').height(winHeight);
        $('.float-srcpreivew').show();
        $('.float-srcpreivew').transition({opacity: 1});
    });
    // 关闭查看原图
    $("#absl-btn-close2").click(function(){
        $('.pictur-browse-wrap').css('overflow', 'auto');
        var $img = $('.itemwrap>.current>img');
        var top = $img.offset().top - $(document).scrollTop() + $('.pictur-browse-wrap').scrollTop();
        var left = $img.offset().left;
        $('.float-srcpreivew-img').transition({
            top: top,
            left: left,
            marginLeft: 0,
            width: $img.width()
        }, function(){
            $(this).remove();
            $('.float-srcpreivew-outer').remove();
        });
        $("#absl-btn-close2").fadeOut();
        $('.float-srcpreivew').transition({opacity: 0}, function(){
            $(this).hide();
        });
    });
    // 查看右侧图片
    $('.pictur-columns').on('click', 'li', function(){
        var $this = $(this);
        $this.addClass("current").siblings().removeClass("current");
        var $html = $($this.parent().html()).removeAttr('style');
        $('.itemwrap>.current').transition( {x: -600, opacity: 0}, 0.2e3, function(){
            $('.itemwrap').html($html);
            $('.itemwrap').transition( {height: $('.itemwrap>.current').height()} );
        } );
    });

    $('.pictur-browse-wrap').scroll(function(){
        var scrollTop = $(this).scrollTop();
        var winHeight = $(window).height();
        $('#absl-btn-close').css({top: scrollTop});
        $('.pictur-browse-wrap>.icon-leftcircle, .pictur-browse-wrap>.icon-rightcircle').css({top: winHeight/2 + scrollTop});
    });
    // 标签切换
    $('.ctrl-tag-title>.tags-div>button').click(function(){
        $(this).addClass("selected").siblings().removeClass("selected");
    });
    $(document).on('click', '[pictureView-event]', function(){
        $('body').addClass('modal-open');
        $('.pictur-browse-wrap').show().transition({ opacity: 1 }, 1e3, function(){});
        var image_id = $(this).attr('image-id');
        $('.itemwrap li').each(function(){
            if($(this).attr('image-id')==image_id){
                $(this).addClass('current').siblings().removeClass('current');
            }
        })
        $('.itemwrap').transition({height: $('.picture .current').height()});
        var image_title = $('.picture .current').attr('image-title');
        var image_classify = $('.picture .current').attr('image-classify');
        var image_time = $('.picture .current').attr('image-time');
        var image_label = $('.picture .current').attr('image-label');
        var image_num = $('.picture .current').attr('image-num');
        image_label=image_label.split(',');
        var html = '';
        for(var i = 0;i<image_label.length;i++){
            html+='<button type="button">'+image_label[i]+'</button>';
        }
        $('.title-text').text(image_title);
        $('.this-count').text(parseInt(image_num)+1);
        $('.pic-bro-view>.title>.spa_gray').text(image_time);
        $('.cate-value').text(image_classify);
        $('.classify').text(image_classify);
       // $('.tags-div').html(html);
    });
    $('.tag-column-choose>button').click(function(){
        var $index = $(this).index();
        $(this).addClass("selected").siblings().removeClass("selected");
        $('.pictur-columns>div').hide();
        $('.pictur-columns>div').eq($index).show();
        if ($index == 1) {
            $('.pictur-columns>.column2>ul').masonry({
                // options
                itemSelector : 'li',
                isAnimated : true,
                gutter: 5
            });
            $('.pictur-columns>.column').height(500);
        }
    });

</script>